<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #tank {
            position: absolute;
            top:50px;
            left:0;
            width: 80px;
            height: 100px;
        }
        .paota {
            position: absolute;
            top:30px;
            left:20px;
            width: 40px;
            height: 60px;
            border:1px solid #333;
            background-color: green;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;
            z-index: 2;
        }
        .paotong {
            position: absolute;
            top:10px;
            left:35px;
            width: 10px;
            height: 50px;
            border:1px solid green;
            background-color: green;
            z-index: 2;
        }
        .ld-l,
        .ld-r {
            position: absolute;
            top:20px;
            width: 20px;
            height: 80px;
            border:1px solid #333;
            background-color: green;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;
        }
        .ld-l {
            left:0;
        }
        .ld-r {
            left:60px;
        }
        .paodan {
            position: absolute;
            width: 8px;
            height: 10px;
            border:1px solid #333;
            background-color: green;
            -webkit-border-radius:4px 4px 0 0;
            -moz-border-radius:4px 4px 0 0;
            border-radius:4px 4px 0 0;
            z-index:1;
        }
        #diren {
            position: absolute;
            top: 200px;
            left: 800px;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="tank">
    <div class="paota"></div>
    <div class="paotong"></div>
    <div class="ld-l"></div>
    <div class="ld-r"></div>
</div>
<!--<div class="paodan"></div>-->
<div id="diren">
    
</div>

<script>

    //坦克类
    function tank() {
        //保存坦克对象
        this.tanker = document.getElementById('tank');
        //保存移动的计时器
        this.moveTime;
        //保存方向
        this.fangxiang = 1;
        //移动方法
        this.move = function(fangxiang){
            //方向归零
            this.tanker.style.transform = "rotate(0deg)";
            //判断方向(0:左   1:上   2:右    3:下)
            switch (fangxiang) {
                case 0://zuo
                    this.tanker.style.transform = "rotate(-90deg)";
                        this.fangxiang = 0;
                    if (!this.moveTime){
                        //console.log(this.moveTime);
                        this.moveTime = setInterval(function () {
                            this.tanke.tanker.style.left = parseInt(this.tanke.tanker.style.left) - 1 + 'px';
                        },10);
                    }
                    break;
                case 1://上
                    this.tanker.style.transform = "rotate(0deg)";
                    this.fangxiang = 1;
                    if (!this.moveTime){
                        this.moveTime = setInterval(function () {
                            this.tanke.tanker.style.top = parseInt(this.tanke.tanker.style.top)  - 1 + 'px';
                        },10);
                    }
                    break;
                case 2://右
                    this.tanker.style.transform = "rotate(90deg)";
                    this.fangxiang = 2;
                    if (!this.moveTime) {
                        this.moveTime = setInterval(function () {
                            this.tanke.tanker.style.left = parseInt(this.tanke.tanker.style.left) + 1 + 'px';
                        }, 10);
                    }
                    break;
                case 3://z下
                    this.tanker.style.transform = "rotate(180deg)";
                    this.fangxiang = 3;
                    if (!this.moveTime) {
                        this.moveTime = setInterval(function () {
                            this.tanke.tanker.style.top = parseInt(this.tanke.tanker.style.top) + 1 + 'px';
                        }, 10);
                    }
                    break;
            }
        }
        //开炮方法
        var aaa = 1;
        this.shut = function (i){
            if (aaa == 1){
                aaa = 2;
                new paoDanClass(parseInt(this.tanker.style.left),parseInt(this.tanker.style.top),this.fangxiang,i);
                setTimeout(function () {
                    aaa = 1;
                },1000);
           }
        }

    }


    /*
     *    炮弹类
     *    参数 : X:left值      Y;top值       f:方向(0123)    i;炮弹编号
     * */

    function paoDanClass(x,y,f,i) {
        //一个数组保存炮弹时间
        var paodanTime = [];
        //产生炮弹div
        var paodan = document.createElement('div');
        paodan.setAttribute('class','paodan');
        document.body.appendChild(paodan);
        //炮弹移动次数
        var shecheng = 0;
        //判断方向移动炮弹
        switch (f) {
            case 0:
                paodan.style.transform = "rotate(-90deg)";
                paodan.style.top = y + 43 + 'px';
                paodanTime[i] = setInterval(function () {
                    paodan.style.left = x + 'px';
                    x = x -1;
                    shecheng++;
                    if(x < 0 || shecheng == 400){
                        document.body.removeChild(paodan);
                        clearInterval(paodanTime[i]);
                    }
                },2);
                break;
            case 1:
                paodan.style.transform = "rotate(0deg)";
                paodan.style.left = x + 36 + 'px';
                paodanTime[i] = setInterval(function () {
                    paodan.style.top = y + 'px';
                    y = y -1;
                    shecheng++;
                    var pengzhuang = kill(x+36,y);
                    if(pengzhuang){
                        document.body.removeChild(paodan);
                        clearInterval(paodanTime[i]);
                    }else if(y < 0 || shecheng == 400){
                        document.body.removeChild(paodan);
                        clearInterval(paodanTime[i]);
                    }
                },2);
                break;
            case 2:
                paodan.style.transform = "rotate(90deg)";
                paodan.style.top = y + 45 + 'px';
                paodanTime[i] = setInterval(function () {
                    paodan.style.left = x+60 + 'px';
                    x = x +1;
                    shecheng++;
                    if(shecheng == 400){
                        document.body.removeChild(paodan);
                        clearInterval(paodanTime[i]);
                    }
                },2);
                break;
            case 3:
                paodan.style.transform = "rotate(180deg)";
                paodan.style.left = x + 34 + 'px';
                paodanTime[i] = setInterval(function () {
                    paodan.style.top = y+60 + 'px';
                    y = y +1;
                    shecheng++;
                    if(shecheng == 400){
                        document.body.removeChild(paodan);
                        clearInterval(paodanTime[i]);
                    }
                },2);
                break;
        }

        //碰撞检测
        function kill(x,y) {
            console.log(x,y);
            if((x>800 && x<850)  && y ==250){
                document.getElementById('diren').style.display = 'none';
                return true;
            }else{
                return false;
            }
        }
    }


    //实例化坦克对象
    var tanke = new tank();
    //初始化坦克位置
    tanke.tanker.style.left = '500px';
    tanke.tanker.style.top = '200px';
    //console.log(tanke.tank.style.top);
    //按键跑路
    var paodanNO = 0;
    document.body.onkeydown = function (evt) {
        var e = window.event || evt;
        var key = e.keyCode;
        switch (key) {
            case 37:
                tanke.move(0);
                break;
            case 38:
                tanke.move(1);
                break;
            case 39:
                tanke.move(2);
                break;
            case 40:
                tanke.move(3);
                break;
            case 32:
                tanke.shut(paodanNO);
                    paodanNO++;
                break;
        }
    }
    //弹起键停止
    document.body.onkeyup = function () {
        //console.log('删除的'+ tanke.moveTime);
        clearInterval(tanke.moveTime);
        tanke.moveTime = false;
    }

</script>
</body>
</html>